<template>
	<el-progress v-bind="$attrs" :percentage="p"></el-progress>
</template>

<script lang="ts" setup name="xprogress">
	import {
		ref,
		onMounted
	} from 'vue'

	let props = defineProps({
		percentage: {
			type: Number,
			default: 0
		},

		isAnimation: {
			type: Boolean,
			default: false
		},

		time: {
			type: Number,
			default: 3000
		}
	})
	
	let p = ref(0)
	
	onMounted(() => {
		if (props.isAnimation) {
			let t = Math.ceil(props.time / props.percentage)
			let timer = setInterval(() => {
				p.value += 1
				if(p.value >= props.percentage) {
					p.value = props.percentage
					clearInterval(timer)
				}
			}, t)
		} else {
			p.value = props.percentage
		}
	})
</script>

<style scoped>

</style>
